/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

//生命周期
var lifeStyle = React.createClass({//类名一定要大写开头
    //不可改变的值
    getDefaultProps(){//设置默认属性
        return{
            title:'test'
        }
    },

    propTypes:{
        title : React.PropTypes.string
    },//属性校验器,表示必须是字符串

    //可改变的值
    getInitialState(){
        return{

        }
    },

    componentWillMount(){

    },

    //渲染视图
    render() {
        return (
            <View style={styles.container}>
                <Text ref='topView' style={styles.welcome}>
                    {this.props.title}
                </Text>
            </View>
        );
    },

    //一般在此方法中请求数据
    componentDidMount(){

    },

    activeEvent(event) {
        //更新状态机,会自动调用render刷新页面
        this.setState({
            title:event
        });
        //拿到View
        this.refs.topView;
    }
})

//ES6的写法
// class lifeStyle extends Component {
//     //构造器
//     constructor(props){
//         super(props);
//         //初始状态
//         this.state={liked:false};
//     }
//
//     //不能在组件定义的时候定义一个属性
//     render() {
//         return (
//             <View style={styles.container}>
//                   <Text style={styles.welcome}>
//                       {this.props.title}
//                   </Text>
//             </View>
//         );
//     }
// }

////这两个属性不能写在class内
// lifeStyle.propTypes={//属性校验器,表示该属性必须为bool,否则错误
//     title: React.PropTypes.bool
// }
//
// lifeStyle.defaultProps={
//     title: 'test' //设置默认属性
//}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: 'red',
    }
});

//输出类
module.exports = lifeStyle;
